import React, { Component } from 'react';

class List extends Component {
  render() {
    return (
      this.props.list.map((item,index)=>{
        const isSelect = item.isSelect;
        return(
          <li key={index} className="list-item" style={{background:isSelect?"#fe7345":"rgb(242,242,242)"}}>
            <div>
              <button className='list-checkbox-btn'>
                <div 
                  className='list-checkbox' 
                  onClick={()=>this.props.changeIsSelect(item.id)}
                  style={{border:isSelect?"none":"2px solid #494a4b",padding:isSelect?"0px":"5px"}}
                >
                  <span  
                    style={{display:isSelect?"inline":"none"}}
                  >
                    ✔
                  </span>
                </div>
              </button>
              <span style={{color:isSelect?"white":"black",textDecoration:isSelect?"line-through":"none"}}>{item.content}</span>
            </div>
            <button 
              className='list-delbtn'
              onClick={()=>this.props.deleteContent(item.id)}
              style={{color:isSelect?"white":"black"}}
            >
              ✖
            </button>
          </li>
        )
      })
    )
  }
}
export default List;